<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Model Events Demo</title>
        <style type='text/css'>
            body {font-family: verdana}
            li {border: solid 1px gray; padding: 5px; width: 250px;}
			li a {color: red; font-weight: bold;}
			p {width: 400px;}
        </style>
	</head>
	<body>
<div id="demo-instructions">
		<h1>Model Setter Demo</h1>
		<p>This demo shows converting date strings sent by the
		server to JavaScript dates with Setters.</p>
</div>
<div id="demo-html">
<ul id='contacts'></ul>
</div>	
<script type='text/javascript' 
        src='../../steal/steal.js'>   
</script>

<script type='text/javascript' id="demo-source">   
steal('jquery/model',
		'jquery/dom/fixture',
		'jquery/model/list',
		function(){

$.fixture("/contacts.json", function(orig, settings, headers){
	return [[{'id': 1,'name' : 'Justin Meyer',
	          'birthday': '1982-10-20'},
			 {'id': 2,'name' : 'Brian Moschel',
			  'birthday': '1983-11-10'},
			 {'id': 3,'name' : 'Alex Gomes',
			  'birthday': '1980-2-10'}]];
});

// A contact model
$.Model("Contact",{
	findAll : "/contacts.json"
},{
	// converts dates
	setBirthday : function(raw){
		if(typeof raw == 'string'){
				var matches = raw.match(/(\d+)-(\d+)-(\d+)/)
				return new Date( matches[1], 
				                (+matches[2])-1, 
			                     matches[3] )
		}else if(raw instanceof Date){
			return raw;
		}
	}


});

// get the distance between years
var age = function(birthday){
   return new Date().getFullYear() - 
          birthday.getFullYear()
};

// get all contacts and put them in the page
Contact.findAll( {}, function( contacts ){
  var html = [];
  for(var i =0; i < contacts.length; i++){
    html.push('<li>'+age(contacts[i].birthday) + '</li>')
  }
  $('#contacts').html( html.join('') );
});

});
</script>
	</body>
</html>